<template>
	<view class="app">
		<z-paging
			show-refresher-when-reload
			show-refresher-update-time
			v-model="shifuList"
			ref="paging"
			:auto="false"
			@query="queryList"
		>
			<view class="top" slot="top">
				<view class="area" @tap="jumpAddress">
					<text>{{ keyValue.location }}</text>
					<u-icon size="20" name="arrow-down" color="#3ab54a"></u-icon>
				</view>
				<view class="search">
					<u-search
						placeholder="请输入技师姓名搜索"
						search-icon-color="#3ab54a"
						v-model="keyValue.name"
						bg-color="#fff"
						height="70"
						:show-action="false"
						@clear="search"
						@search="search"
					></u-search>
				</view>
			</view>
			<block v-for="item in shifuList" :key="item._id">
				<shifu-item :info="item"></shifu-item>
			</block>
		</z-paging>
	</view>
</template>

<script>
var vk = uni.vk // vk依赖
import shifuItem from "./components/shifu-item.vue"

export default {
	components: { shifuItem },
	data() {
		return {
			// 搜索关键字
			keyValue: { location: "合肥市", name: "" },
			lonlat: null,
			// 技师列表
			shifuList: []
		}
	},
	onLoad() {
		let adr = vk.getStorageSync("addr")
		if (adr) {
			this.keyValue.location = adr
		}
		uni.$on("refreshShifuList", () => {
			this.$refs.paging.refresh()
		})
		uni.$on("cityChange", item => {
			this.keyValue.location = item
			if (this.$refs.paging) this.$refs.paging.reload()
		})
		this.$nextTick(() => {
			this.checkAddress()
		})
	},
	methods: {
		// 地址
		checkAddress() {
			let adr = vk.getStorageSync("adr")
			if (!adr) {
				vk.confirm("需要获取当前位置已用于计算距离，请开启权限", res => {
					if (res.confirm) {
						uni.getLocation({
							type: "gcj02",
							geocode: true,
							success: async res => {
								if (!res.address) {
									return vk.alert("定位失败，请稍后重试~")
								}
								vk.setStorageSync("adr", [res.longitude, res.latitude])
								this.lonlat = [res.longitude, res.latitude]
								this.$refs.paging.reload()
							},
							fail: () => {
								vk.alert("定位失败，请稍后重试~")
								this.$refs.paging.reload()
							}
						})
					} else {
						vk.alert("未开启权限，将无法使用部分功能~")
						this.$refs.paging.reload()
					}
				})
			} else {
				this.lonlat = adr
				this.$refs.paging.reload()
			}
		},
		// 查询技师列表
		queryList(pageIndex, pageSize) {
			const { location, name } = this.keyValue
			vk.callFunction({
				url: "client/pub.queryShifu",
				data: {
					pageIndex,
					location,
					pageSize,
					name,
					lonlat: this.lonlat
				}
			}).then(res => {
				this.$refs.paging.complete(res.rows)
			})
		},
		// 跳转地址
		jumpAddress() {
			uni.navigateTo({ url: `/pages/search/address?city=${this.keyValue.location}` })
		},
		// 搜索
		search() {
			this.$refs.paging.reload()
		}
	}
}
</script>

<style lang="scss" scoped>
.app {
	height: 100vh;
	/* #ifdef H5 */
	height: calc(100vh - 50px - 88rpx);
	/* #endif */
	background-color: #f5f5f5;
}

.top {
	display: flex;
	align-items: baseline;
	padding: 20rpx;
	.area {
		font-size: 30rpx;
		color: #3ab54a;
		.u-icon {
			margin-left: 8rpx;
		}
	}
	.search {
		flex: 1;
		margin-left: 30rpx;
	}
}

.fresh {
	position: fixed;
	bottom: 140rpx;
	right: 30rpx;
}
</style>
